<!doctype html>
<html lang="en" data-framework="riotjs">
  <head>
    <meta charset="utf-8">
    <title>Riot.js • TodoMVC</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
  </head>
  <body>
    <todo></todo>

    <script type="text/html" id="todo">
      <section id="todoapp">
        <header id="header">
          <h1>todos</h1>
          <input id="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" onkeyup="{add}">
        </header>
        <section id="main" show="{todos.length}">
          <input id="toggle-all" type="checkbox" __checked="{remaining == 0}" onclick="{toggleAll}">
          <ul id="todo-list">
            <todo-item each="{todo in todos}" hide="{!todo.completed == filters.indexOf(filter) - 1}"></todo-item>
          </ul>
        </section>
        <footer id="footer" show="{todos.length}">
          <span id="todo-count">
            <strong>{remaining}</strong> {remaining < 2 ? 'item' : 'items'} left
          </span>
          <ul id="filters">
            <li each="{f in filters}">
              <a class="{selected: filter == f}" href="#/{f}">{f[0].toUpperCase() + f.substr(1)}</a>
            </li>
          </ul>
          <button id="clear-completed" onclick="{removeCompleted}" show="{todos.length > remaining}">
            Clear completed ({todos.length - remaining})
          </button>
        </footer>
      </section>
      <footer id="info">
        <p>Double-click to edit a todo</p>
        <p>Written by <a href="http://cweili.gitcafe.io">Cweili</a></p>
        <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
      </footer>
    </script>

    <script type="text/html" id="todo-item">
      <li class="todo {completed: todo.completed, editing: editing}">
        <div class="view">
          <input class="toggle" type="checkbox" __checked="{todo.completed}" onclick="{toggle}">
          <label ondblclick="{edit}">{todo.title}</label>
          <button class="destroy" onclick="{remove}"></button>
        </div>
        <input name="todoeditbox" class="edit" type="text" onblur="{doneEdit}" onkeyup="{editKeyUp}">
      </li>
    </script>

    <script src="node_modules/riot/riot.min.js"></script>
    <script src="js/store.js"></script>
    <script src="js/todo.js"></script>
    <script src="js/todo-item.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>
